<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NOTE</title>

<link rel="stylesheet"
	href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>

<style>
body { font-size: 80%;  }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }

.centered { text-align: center; margin: auto; }
.character_name { color: red; }
</style>

<body>

<img style="margin-left: 70px;" src="images/ch_${sadari_user.character }.png" height="120px">

<p>안녕하세요. <span class="character_name">${sadari_user.alias }</span> <strong>${sadari_user.name }</strong>님</p> 
<p>
	<button id="btn_make_paper">새로운 종이 꺼내기</button>
	<button id="btn_logout">나가기</button>	
</p>

<p>입장 가능한 종이들..</p>
<ol id="papers"></ol>

<div id="dialog_make_paper" title="">
	<form action="./makePaper" method="post" id="form_make_paper">
		<p>새로운 종이의 제목과 최대 참가인원, 여정의 길이를 입력하세요.</p>
		<input type="hidden" id="make_paper_userId" name="userId" value="${sadari_user.id}">
		<label for="input_make_paper_name">종이의 제목</label><input type="text" id="input_make_paper_name" name="paperName">
		<label for="input_make_paper_max_user">참가 인원 수</label><input type="number" min="2" max="20" size="3" maxlength="3" id="input_make_paper_max_user" name="maxUser">
		<label for="input_make_paper_line">여정의 길이</label><input type="number" min="10" max="500" size="3" maxlength="3" value="20" id="input_make_paper_line" name="line">
		<input type="checkbox" id="input_make_paper_mode_solo" value="true" name="soloMode" style="display: inline;" disabled="disabled"><label for="input_make_paper_mode_solo" style="display: inline;">혼자 모든걸 처리하겠다...</label><br/>
		<input type="checkbox" id="input_make_paper_mode_one_goal" value="true" name="oneGoal" style="display: inline;"><label for="input_make_paper_mode_one_goal" style="display: inline;">결과는 단 하나!</label>
	</form>
</div>

<script>
$(function(){
	
	$("#dialog_make_paper").dialog({
		autoOpen: false,
		buttons: [{text: "떠나자", click: function(){
			
			if(!$("#input_make_paper_name").val()){
				$("#input_make_paper_name").focus();
				return;
			}
			
			if(!$("#input_make_paper_max_user").val()){
				$("#input_make_paper_max_user").focus();
				return;
			}
			
			if(!$("#input_make_paper_line").val()){
				$("#input_make_paper_line").focus();
				return;
			}
			
			$("#form_make_paper").submit();
						
		} }]		
	});
	
	$("#btn_make_paper").click(openMakePaperDialog);
	$("#btn_logout").click(logout);
	
	displayPapers();
	window.setInterval(displayPapers, 2000);	
	
});

function logout(){
	window.location = "./logout";
}

function openMakePaperDialog(){
	$("#dialog_make_paper").dialog("open");
}

//function makePaper(paperName, maxUser, line){
	//$.post( "./makePaper",{"userId": "${sadari_user.id}", "paperName": paperName, "maxUser": maxUser, "line": line} , function( data ) {
	//	if(data){
	//		window.location = "./note/paper/"+data;
	//	}
	//});	
//}

function displayPapers(){
	
	$.get("./note/papers", function(papers){
		if(papers.length){
			
			$("#papers").empty();
			
			for(var i = 0; i < papers.length; i++){
				$("#papers").append("<li><div id='paper_"+papers[i].id+"'><span>"+papers[i].name+"("+ papers[i].users.length + "/" + papers[i].maxUser +") </span></div></li>");
				
				switch (papers[i].status) {
				case 0:
					
					if(papers[i].leaderId == "${sadari_user.id }"){
						$("#paper_"+papers[i].id).append("<button class='btn_paper' id='btn_paper_'"+papers[i].id+"' value='"+papers[i].id+"'>입장</button>");
					}
					
					$("#paper_"+papers[i].id).append("<span>준비 중</span>");
					break;

				case 1:					
					$("#paper_"+papers[i].id).append("<button class='btn_paper' id='btn_paper_'"+papers[i].id+"' value='"+papers[i].id+"'>입장</button>");
					$("#paper_"+papers[i].id).append("<span>동행 가능</span>");
					break;

				case 2:					
					$("#paper_"+papers[i].id).append("<button class='btn_paper' id='btn_paper_'"+papers[i].id+"' value='"+papers[i].id+"'>결과 보기</button>");
					$("#paper_"+papers[i].id).append("<span>우리의 길을 이미 정해 버렸어..</span>");
					break;

				case 3:					
					$("#paper_"+papers[i].id).append("<button class='btn_paper' id='btn_paper_'"+papers[i].id+"' value='"+papers[i].id+"'>입장</button>");
					$("#paper_"+papers[i].id).append("<span>기억의 메모리..</span>");
					break;


				}

				
			}
			
			$(".btn_paper").click(function(){
				
				window.location = "./note/paper/"+$(this).val();
				
			});
		}else{
			$("#papers").empty();
			$("#papers").append("..가 아직 없으니 빨리 만드세요..");
		}
	});	
}

</script>
	
</body>
</html>